<template>
  <div class="templetImport">
    <div>
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
      >全选</el-checkbox>
      <div></div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="fromed">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
        label-position="left"
      >
        <el-row :gutter="15">
          <el-col :span="8">
            <el-row :gutter="0">
              <el-col :span="24">
                <el-form-item label="点位名称:" prop="poname">
                  <el-input :style="{width: '100%'}" v-model="formData.poname"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="15">
              <el-col :span="24">
                <el-form-item label="巡检类型:" prop="devicetype">
                  <!-- <el-input
                    v-model="formData.devicetype"
                    placeholder=""
                    clearable
                    :style="{width: '100%'}"
                  />-->
                  <el-select
                    v-model="formData.devicetype"
                    placeholder="请选择"
                    clearable
                    :style="{width: '100%'}"
                  >
                    <el-option
                      v-for="item in inspectiontypeOption"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row :gutter="0">
              <el-col :span="24">
                <div class="templetImport-input">
                  <el-button type="primary" @click="init" icon="el-icon-search">搜索</el-button>
                  <el-button type="primary" @click="submitImport" icon="el-icon-search">导入</el-button>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="tableed mediumtablestyle">
      <el-table
        :data="tableData"
        border
        height="100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
        style="width: 100%; height: 100%;"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="XJDWMC" label="点位名称"></el-table-column>
        <el-table-column prop="SSSBLX" label="巡检类型"></el-table-column>
        <el-table-column prop="SSSBLX" label="设备类型"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";
@Component
export default class templetImport extends Vue {
  @Prop() cityOptionsList: any;
  @Prop() treeObj: any;
  formData = {
    poname: "",
    devicetype: "",
  };
  //巡检类型下拉接口
  inspectiontypeOption = [];
  rules = {};
  cityOptions = this.cityOptionsList;
  checkAll = false;
  //勾选的数据
  checkedCities = [];
  cities = this.cityOptions;
  isIndeterminate = true;
  //表格选择的数据
  tableFrom = [];
  handleCheckAllChange(val: any) {
    this.checkedCities = val ? this.cityOptions : [];
    // console.log(this.checkedCities);

    this.isIndeterminate = false;
  }
  handleCheckedCitiesChange(value: any) {
    let checkedCount = value.length;
    this.checkAll = checkedCount === this.cities.length;
    this.isIndeterminate =
      checkedCount > 0 && checkedCount < this.cities.length;
  }
  //导入
  submitImport() {
    if (this.tableFrom.length < 1) {
      this.$message({
        message: "请选择一条或多条数据",
        type: "warning",
      });
    } else {
      var form = [];
      if (!this.treeObj.ssds) {
        let obj: any = {};
        obj.ssds = JointInspectionModule.getAreaList[0].code;
        obj.ssdsmc = JointInspectionModule.getAreaList[0].name;
        this.tableFrom.forEach((item) => {
          form.push(Object.assign(item, obj));
        });
      } else {
        this.tableFrom.forEach((item) => {
          form.push(Object.assign(item, this.treeObj));
        });
      }
      // console.log(form);
      (this as any).$services
            .importPointers({ data: form, method: "post" })
            .then((result: any) => {
              // console.log(result);
              if (result.code === 200) {
            this.$message({
              type: "success",
              message: `${result.message}`,
            });
          } else {
            this.$message({
              type: "error",
              message: "操作失败!",
            });
          }
             this.$emit("inithandle");
            })
            .catch((err: object) => {
              console.log(err);
            });
      
    }
  }
  //table表格相关事件数据
  tableData = [];
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //选择的数据

  handleSelectionChange(val) {
    var tablefrom = [];
    val.map((item) => {
      var obj: any = {};
      obj.DWMC = item.XJDWMC;
      obj.REALDATATYPE = item.XJLX;
      obj.SBLX = item.SSSBLX;
      tablefrom.push(obj);
    });
    this.tableFrom = tablefrom;
    // console.log(this.tableFrom);
  }
  //表格初始
  init() {
    var form: any = {};
    form.dwmc = this.formData.poname;
    if (this.formData.devicetype) {
      let resultArr = this.inspectiontypeOption.filter((item) => {
        return item.code === this.formData.devicetype;
      });
      form.xjlx = resultArr[0].name;
    }
    let checkedStr = "";
    if (this.checkedCities.length > 0) {
      this.checkedCities.map((item: any) => {
        checkedStr = checkedStr + "," + item;
      });
      checkedStr = checkedStr.substr(1);
      // console.log(checkedStr);
    }
    form.sblx = checkedStr;
    // console.log(form);
    (this as any).$services
      .getAddTemplate({ data: form})
      .then((result: any) => {
        // console.log(result);
        this.tableData = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  //巡检类型下拉
  initGetXjlx() {
    (this as any).$services
      .getXjlx({ data: {} })
      .then((result: any) => {
        this.inspectiontypeOption = result.data;
        // console.log(result, 456);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  mounted() {
    this.init();
    this.initGetXjlx();
    // console.log(this.cityOptionsList);
  }
}
</script>

<style lang="scss" scoped>
.templetImport {
  width: 100%;
  .fromed {
    margin-top: 0.25rem;
  }
  &-input {
    display: flex;
    width: 100%;
    justify-content: flex-end;
  }
  .tableed {
    height: 4.5rem;
    overflow-y: auto;
  }
}
</style>

